<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p><input type="text" id="text"></p>
    <ul id="box">

    </ul>
</body>

</html>

<script type="module">
    import cookie from './node_modules/js-cookie/dist/js.cookie.min.mjs'
    class Person {
        constructor(options) {
            this.reIpt = document.querySelector(options.reIpt)
            this.reBox = document.querySelector(options.reBox)
            this.list = []
            this.add()
            this.reList()
            this.del()
            this.auto()
        }
        add() {
            this.reIpt.addEventListener('keyup', () => {
                if (event.keyCode == 13) {
                    let obj = { title: this.reIpt.value, flag: false }
                    this.list.push(obj)
                    this.setCookie()
                    this.reIpt.value=''
                    this.auto()
                }
            })
        }
        setCookie() {
            cookie.set('list', JSON.stringify(this.list))
        }
        reList() {
            if (cookie.get('list') == undefined) {
                this.list = []
            } else {
                this.list = JSON.parse(cookie.get('list'))
            }
        }
        auto() {
            let ing = ''
            this.list.forEach((item, key) => {
                ing += `<li><input type="checkbox" ><span>${item.title}</span><button data-key="${key}">删除</button></li>`
            })
            this.reBox.innerHTML = ing
        }
        del() {
            this.reBox.addEventListener('click', () => {

                let k = event.target.dataset.key
                if (event.target.localName == 'button') {
                    if (confirm('确定要删除吗？')) {
                        this.list.splice(k, 1)
                    }

                    this.setCookie()
                    this.auto()
                }
            })
        }
    }
    new Person({
        reIpt: '#text',
        reBox: '#box'
    })
</script>